<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="spanconent"></div>
      </el-col>
      <!-- 公告 -->
      <el-col :span="12">
        <el-card class="box-card">
          <div
            style="margin:-10px -10px; "
            slot="header"
            class="clearfix"
            align="left"
          >
            <span><i class="el-icon-info"></i> 公告</span>
          </div>
          <!-- 公告表格数据 -->
          <el-table :data="publishData" style="width: 100%" stripe>
            <el-table-column
              type="index"
              label="#"
              width="80"
            ></el-table-column>
            <el-table-column prop="title" label="标题"></el-table-column>
            <el-table-column prop="date" label="日期"></el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 近期比赛 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix" align="left">
            <span><i class="el-icon-date"></i> 近期测试</span>
          </div>
          <!-- 表格比赛数据 -->
          <el-table :data="contestData" style="width: 100%" stripe>
            <el-table-column
              type="index"
              label="#"
              width="60"
            ></el-table-column>
            <el-table-column prop="name" label="比赛名称"> </el-table-column>
            <el-table-column prop="date" label="开始时间"> </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="3">
        <div class="spancontent"></div>
      </el-col>
    </el-row>

    <!-- 排行榜 -->
    <el-row :gutter="20">
      <el-col :span="3">
        <div class="spanconent"></div>
      </el-col>
      <el-col :span="12">
        <el-card>
          <div
            style="margin:-10px -10px; "
            slot="header"
            class="clearfix rankCard"
            align="left"
          >
            <span><i class="el-icon-s-data"></i> 榜首前十</span>
          </div>
          <!-- 表格排名数据 -->
          <el-table :data="rankData" style="width: 100%" border stripe>
            <el-table-column
              type="index"
              label="#"
              width="60"
            ></el-table-column>
            <el-table-column prop="username" label="用户名" width="230">
            </el-table-column>
            <el-table-column prop="email" label="邮箱" width="250">
            </el-table-column>
            <el-table-column prop="acCount" label="Ac数量" width="130">
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <!-- 联系我们 -->
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="clearfix" align="left">
            <span><i class="el-icon-phone"></i> 联系方式</span>
          </div>

          <p>
            邮箱: adm1nistrator@163.com
          </p>
          <p>
            QQ: 1649183172
          </p>
        </el-card>
      </el-col>

      <el-col :span="3">
        <div class="spanconent"></div>
      </el-col>
    </el-row>
    
  </div>
</template>

<script>

export default {
  data() {
    return {
      // 通知公告数据
      publishData: [
        {
          id: 1,
          title: "欢迎2019级新Acmer",
          date: "2019-09-21"
        },
        {
          id: 2,
          title: "使用新版Acm系统",
          date: "2019-09-16"
        }, {
          id: 3,
          title: "欢迎大家加入社团",
          date: "2019-10-16"
        }
      ],
      // 近期比赛数据
      contestData: [
        {
          id: 1,
          name: "2019年内蒙Acm训练赛",
          date: "2019-04-16"
        },
        {
          id: 2,
          name: "2019年内蒙Acm重现赛",
          date: "2019-05-16"
        },
        {
          id: 2,
          name: "2019年内蒙蓝桥杯训练赛",
          date: "2019-08-16"
        }
      ],

      // 排名数据
       rankData:[],

      // 分页数据
      pageParam: {
        pageSize: 5,
        pageNo: 1,
        param: {

        }
      },
      
    };
  },

  methods: {

    // 获取用户排名的前 5 
    async getRankList(){

        const {data:res} = await this.$http.post('rank/page',this.pageParam);
        
        if(res.meta.code !== 200){
            return this.$message.error('获取用户排名失败')
        }

        this.rankData = res.data.records;
        console.log(res)

    }
  },
  created() {

    this.getRankList()
  },


  computed:{
    
  }
};
</script>

<style scope>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 5px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: left;
}

.box-card {
  height: 400px;
}

.el-card {
  margin-top: 10px;
}
</style>
